<template>
  <div class="userCenter">
    <div class="list">
      <div class="item">
        <div>
          <div class="item-primary">
            <span class="item-content">支付倒计时：<span>{{timeValue}}</span> </span>
          </div>
        </div>
      </div>
      <div class="item">
        <div>
          <div class="item-primary">
            <span class="item-content">订单总金额：<span style="color:#ff5a00">￥170</span></span>
          </div>
        </div>
      </div>
    </div>
    <p class="margin-bottom margin-top payway">请选择支付方式</p>
    <div class="list" ref="payway">
      <div class="item" v-on:click="selectPayway('wechat')" v-bind:class="{active: payway == 'wechat'}">
        <div>
          <div class="item-primary">
            <i class="icon icon-pay-1"></i>
            <span class="item-content">微信支付</span>
          </div>
        </div>
        <div class="" v-show="payway == 'wechat'">
          <i class="icon icon-selected"></i>
        </div>
      </div>
      <div class="item" v-on:click="selectPayway('alipay')" v-bind:class="{active: payway == 'alipay'}">
        <div>
          <div class="item-primary">
            <i class="icon icon-pay-2"></i>
            <span class="item-content">支付宝</span>
          </div>
        </div>
        <div class="" v-show="payway == 'alipay'">
          <i class="icon icon-selected"></i>
        </div>
      </div>
    </div>
    <p class="warning margin-top">请在{{endTime}}钱完成支付，逾期系统将会自动取消该订单</p>
    <div class="footer">
      <button class="primary">确认支付</button>
    </div>
  </div>
</template>
<script>
  import {getFormatDate} from '../../common/js/common'
  export default({
    data () {
      return {
        'payway': 'alipay',
        'orderTime': '2017-10-05 16:00:00',
        'endTime': 0,
        'timeValue': '',
        'timeCount': 1800
      }
    },
    created () {
      this.timeValue = this.timeUnit(this.timeCount)
      this.endTime = getFormatDate(Date.parse(this.orderTime) + 1800 * 1000)
    },
    mounted () {
      this.timeInteval()
    },
    methods: {
      selectPayway (payway) {
        this.payway = payway
      },
      timeInteval () {
        let _self = this
        let tinterval = setInterval(() => {
          if (_self.timeCount > 0) {
            _self.timeCount--
            _self.timeValue = _self.timeUnit(_self.timeCount)
          }
          else {
            clearInterval(tinterval)
          }
        }, 1000)
      },
      timeUnit (time) {
        let minute = Math.floor(time / 60)
        let second = time % 60
        if (minute < 10) {
          minute = '0' + minute
        }
        if (second < 10) {
          second = '0' + second
        }
        return minute + ':' + second
      }
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/redifined.styl"
  @import "../userCenter/index.styl"
  .icon.icon-pay-1
    margin-right cal(15) rem
    background-position 0 -16.5rem

  .icon.icon-pay-2
    margin-right cal(15) rem
    background-position 0 -17.5rem

  .margin-top
    margin-top cal(30) rem

  .margin-bottom
    margin-bottom cal(20) rem

  p
    &.warning
      color yellowColor
      text-align center
      width 80%
      margin-left auto
      margin-right auto
      line-height 0.6rem
      setFontsize(12px)

  .payway
    setFontsize(15px)
    color #333
    padding-left 0.4rem;

  .userCenter
    .list
      .item
        margin-left -0.4rem
        margin-right -0.4rem
        padding: 0 0.4rem;
      .icon-selected
        background-position 0 -18.3rem

  .footer
    position fixed
    bottom 0
    width 100%
    button
      width 100%
      background yellowColor
      color #fff
      border none
      setFontsize(18px)
      line-height cal(88) rem
</style>
